/*馆舍数据*/

.serviceTime {
	width: 6.07rem;
	height: 5.91rem;
}
.title{
	font-family: simhei;
	margin-top: .1rem;
	padding-left: .52rem;
	font-size: .24rem;
	height: .32rem;
	line-height: .32rem;
	background: url(../img/title_houseData.png) no-repeat .09rem 0;
	-webkit-background-size: .34rem .32rem;
	background-size: .34rem .32rem;
}
.rect{
	margin: .38rem 0;
	padding: 0 .5rem;
	height: 1.66rem;
	text-align: center;
}
.rect .GPU{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.todayArrived,.todayborrow{
	position: relative;
	width: 1.87rem;
	height: 1.66rem;
}
div[class^="rect_green"]{
	background-image: url(../img/green_rect.png);
}
div[class^="rect_yellow"]{
	background-image: url(../img/yellow_rect.png);
}
.rect_green1,.rect_yellow1{
	z-index: 4;
	opacity: .5;
}
.rect_green2,.rect_yellow2{
	z-index: 3;
	opacity: .5;
}
.rect_green3,.rect_yellow3{
	z-index: 2;
	opacity: .3;
}
.rect_green4,.rect_yellow4{
	z-index: 1;
	opacity: .3;
}
.rect_green1.move,.rect_yellow1.move{
	animation: rotateRect 20s ease-out 0s 1 forwards;
}
.rect_green2.move,.rect_yellow2.move{
	animation: rotateRect 20s ease-out .75s 1 forwards;
}
.rect_green3.move,.rect_yellow3.move{
	animation: rotateRect 20s ease-out 1.5s 1 forwards;
}
.rect_green4.move,.rect_yellow4.move{
	animation: rotateRect 20s ease-out 2.25s 1 forwards;
}
.rect .upTitle{
	padding: .44rem 0 .11rem;
	font-size: .2rem;
}
.rect .upTitle+p{
	font-size: .28rem;
	letter-spacing: .028rem;
}
/*4个网格*/
.grid{
	padding: 0 .34rem;
	/*height: 4.1rem;*/
	height: 2.85rem;
}
.grid_item{
	width: 2.44rem;
	/*height: 1.85rem;*/
	height: 1.2rem;
}
.grid_item .grid_title{
	padding-bottom: .1rem;
	font-size: 0.2rem;
	text-align: center;
}
.grid_item .grid_box{
	position: relative;
	width: 2.44rem;
	/*height: 1.55rem;*/
	height: 1rem;
}
.textContent{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	font-size: .36rem;
	text-align: center;
	/*line-height: 1.55rem;*/
	line-height: 1rem;
}
.textContent small{
	font-size: .24rem;
}
.grid .grid_item:nth-of-type(1) .textContent{
	background-image: url(../img/grid3.png);
	color: #4ebafb;
}
.grid .grid_item:nth-of-type(2) .textContent{
	background-image: url(../img/grid2.png);
	color: #ae84f0;
}
.grid .grid_item:nth-of-type(3) .textContent{
	background-image: url(../img/grid1.png);
	color: #00fe88;
}
.grid .grid_item:nth-of-type(4) .textContent{
	background-image: url(../img/grid4.png);
	color: #f0ff00;
}
.grid_box .grid_canvas,
.grid_box .light_canvas{
	position: absolute;
	left: 0;
	top: 0;
}
.grid_box .grid_canvas{
	z-index: 0;
}
.grid_box .light_canvas{
	z-index: 1;
}
canvas{
	display: block;
}








@-webkit-keyframes rotateRect{
	from{
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}
	to{
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotateRect{
	from{
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}
	to{
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}